<template>
	<view class="P_3">
		<view class="flex_row_between">
			<view @click="tos()" class="flex_colC PTB_3 bg_fff W_44vw B_radius_5 H_30vw">
				<image class="W_12vw" src="../../static/tab3_1.png" mode="widthFix"></image>
				<view class="PT_2">
					凯撒帝国游戏 - 元宇宙
				</view>
			</view>
			<view @click="tos()" class="flex_colC PTB_3 bg_fff W_44vw B_radius_5 H_30vw">
				<image class="W_12vw" src="../../static/tab3_2.png" mode="widthFix"></image>
				<view class="PT_2">
					凯撒帝国 NFT
				</view>
			</view>
		</view>
		<view class="flex_row_between PTB_2">
			<view @click="tos()" class="flex_colC PTB_3 bg_fff W_44vw B_radius_5 H_30vw">
				<image class="W_12vw" src="../../static/tab3_3.png" mode="widthFix"></image>
				<view class="PT_2">
					凯撒帝国商城
				</view>
			</view>
			<view @click="tos()" class="flex_colC PTB_3 bg_fff W_44vw B_radius_5 H_30vw">
				<image class="W_12vw" src="../../static/tab3_04.png" mode="widthFix"></image>
				<view class="PT_2">
					凯撒帝国资本
				</view>
			</view>
		</view>
		<view class="flex_row_between">
			<view @click="tos()" class="flex_colC PTB_3 bg_fff W_44vw B_radius_5 H_30vw">
				<image class="W_12vw" src="../../static/tab3_05.png" mode="widthFix"></image>
				<view class="PT_2">
					凯撒帝国研发园
				</view>
			</view>
			<view @click="tos()" class="flex_colC PTB_3 bg_fff W_44vw B_radius_5 H_30vw">
				<image class="W_12vw" src="../../static/tab3_06.png" mode="widthFix"></image>
				<view class="PT_2">
					凯撒帝国规划蓝图
				</view>
			</view>
		</view>
		<!-- <view class="flex_rowL">
			<view class="pub_color font_weight_bold PTB_2 tab_ac">
				USDT
			</view>
		</view> -->
		<!-- <view class="flex_row_between PTB_2 line_bom color_gray fontS_12">
			<view class="W_50vw">
				名称/24h量
			</view>
			<view class="flex_row_between W_50vw">
				<view class="">
					最新价
				</view>
				<view class="">
					涨跌幅
				</view>
			</view>
		</view> -->
		
		<!-- <view class="flex_row_between PTB_2 line_bom" 
		@click="uOpenWin('./hqDet?code='+item.code+'&id='+item.id)"
		v-for="(item,i) in drawerList" 
		:key='i' 
		v-if="item.name!='USDT'">
			<view class="W_50vw" v-if="item.name!='USDT'">
				<view class="flex_rowL">
					<view class="font_weight_bold">
						{{item.name}}
					</view>
					<view class="fontS_12 color_gray">
						/USDT
					</view>
				</view>
				<view class="flex_rowL fontS_12 color_gray">
					<view class="">
						24H量
					</view>
					<view class="PL_1">
						{{item.num.toFixed(4)}}
					</view>
				</view>
			</view>
			<view class="flex_row_between W_50vw" v-if="item.name!='USDT'">
				<view class="">
					<view class="font_weight_bold">
						{{item.close.toFixed(4)}}
					</view>
					<view class="color_gray fontS_10">
						￥{{(item.close*rate).toFixed(4)}}
					</view>
				</view>
				<view
				:class="item.rate>0?'bg_red':'bg_green'"
				 class="W_20vw textC PTB_2 B_radius_5 color_fff fontS_10">
					{{item.rate>0?'+':''}}{{item.rate}}%
				</view>
			</view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// drawerList:[],
				// currentItem:{},
				// icon:'',
				// iconName:'',
				// moreNum:'',
				// rate:''
			}
		},
		onLoad() {
			// this.getBilist()
			// this.getRate()
		},
		onPullDownRefresh() {
			// this.getBilist()
			// this.getRate()
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			tos(){
				this.toast('敬请期待')
			},
			getRate(){
				let _this = this;
				this.$req('index/getRate',{},function(res){
					_this.rate = res.data.rate
					//console.log(res)
				})
			},
			getBilist(){
				let _this = this;
				this.$req('currency/index',{},function(res){
					console.log(res)
					let list = res.data;
					let arr = [];
					list.forEach((item,i)=>{
						if(item.code!='ksa'){
							_this.drawerList.push({
								name:item.name,
								code:item.code,
								num:'',
								low:'',
								high:'',
								open:'',
								close:'',
								rate:'',
								id:item.id
							})
						}
						
					});
					//console.log(_this.icon)
					if(!_this.icon){
						_this.icon = _this.drawerList[0].code;
						_this.iconName = _this.drawerList[0].name;
					}
					
					_this.drawerList.forEach((item,i)=>{
						if(item.code!='ksa' && item.code!='usdt'){
							_this.getNum(item.code+'usdt',i)
						}
						
					})
				})
			},
			getNum(key,i){
				let _this = this;
				this.$req('huobi/merged',{symbol:key},function(res){
					_this.drawerList[i].num = res.data.amount;
					_this.drawerList[i].low = res.data.low;
					_this.drawerList[i].high = res.data.high;
					_this.drawerList[i].close = res.data.close;
					_this.drawerList[i].open = res.data.open;
					_this.drawerList[i].rate = 
					((res.data.close - res.data.open)/res.data.open*100).toFixed(2);
				})
				console.log(this.currentItem)
				
				if(!this.currentItem.code){
					this.currentItem = _this.drawerList[0];
				}

			},
		}
	}
</script>

<style>
.tab_ac{
	border-bottom: 2px solid #0066ee;
}
</style>
